<template>
  <a-page-header>
    <a-card>
      <a-table :columns="columns" :data-source="data"
               :loading="loading"
               :rowKey="record => record.orderId" >
        <template slot="title">
          <a-row type="flex" justify="space-between">
            <a-col :span="4">
              <a-button type="primary" style="margin-left: 10px;" icon="plus-circle" @click="showAddModal()" >
                新增订单
              </a-button>
              <a-modal
                  :title="modalForm.title"
                  :visible="modalForm.visible"
                  :confirm-loading="modalForm.confirmLoading"
                  okText="提交"
                  cancelText="取消"
                  @ok="handleModalOk"
                  @cancel="handleModalCancel">
                <a-form-model @submit="handleModalFormSubmit"
                              :label-col="{span:4}" :wrapper-col="{span:14}" ref="addForm"
                              :model="addForm" :rules="modalForm.modalFormRules"  >
                  <a-form-model-item label="订单码" ref="sn" prop="sn">
                    <a-input v-model="addForm.sn" placeholder="订单码"/>
                  </a-form-model-item>

                  <a-form-model-item label="订单项数量" ref="num" prop="num">
                    <a-input-number v-model="addForm.num" placeholder="订单项数量" style="width: 100%" />
                  </a-form-model-item>

                  <a-form-model-item label="订单原价" ref="oldPrice" prop="oldPrice">
                    <a-input v-model="addForm.oldPrice" placeholder="订单名称"/>
                  </a-form-model-item>

                  <a-form-model-item label="订单折后价" ref="newPrice" prop="newPrice">
                    <a-input-number v-model="addForm.newPrice"  placeholder="订单排序" />
                  </a-form-model-item>

                  <a-form-model-item label="是否启用" ref="status" prop="status">
                    <a-radio-group v-model="addForm.status">
                      <a-radio-button value="1">
                        启用
                      </a-radio-button>
                      <a-radio-button value="0">
                        禁用
                      </a-radio-button>
                    </a-radio-group>
                  </a-form-model-item>
                </a-form-model>

              </a-modal>
            </a-col>

            <a-col >
<!--              <a-form-model ref="queryForm"-->
<!--                            layout="inline" :model="formInline">-->
<!--                <a-form-model-item ref="orderNameLike" prop="orderNameLike">-->
<!--                  <a-input v-model="formInline.orderNameLike" placeholder="模糊查询订单名称">-->
<!--                  </a-input>-->
<!--                </a-form-model-item>-->

<!--                <a-form-model-item ref="searchStatus" prop="searchStatus">-->
<!--                  <a-select v-model="formInline.searchStatus" style="width: 200px" placeholder="请选择要查询的订单状态">-->
<!--                    <a-select-option value="1">-->
<!--                      启用-->
<!--                    </a-select-option>-->
<!--                    <a-select-option value="0">-->
<!--                      禁用-->
<!--                    </a-select-option>-->
<!--                  </a-select>-->
<!--                </a-form-model-item>-->

<!--                <a-form-model-item>-->
<!--                  <a-button-->
<!--                      type="primary"-->
<!--                      @click="handleSubmit"-->
<!--                      >-->
<!--                    查询-->
<!--                  </a-button>-->
<!--                  <a-button style="margin-left: 10px;" @click="resetSearchForm('queryForm')">-->
<!--                    重置-->
<!--                  </a-button>-->
<!--                </a-form-model-item>-->
<!--              </a-form-model>-->
            </a-col>
          </a-row>
        </template>

        <template #status="status">
          <a-tag :color="status?'green':'volcano'">
            <span v-if="status">启用</span>
            <span v-else>禁用</span>
          </a-tag>
        </template>

        <template #action="record">
          <a-button type="primary" shape="circle" icon="edit" @click="showEditModal(record)" />
          <a-divider type="vertical" />
          <a-popconfirm
              :title="`确认要删除吗?`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDeleteOrder(record.orderId)"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button type="danger" shape="circle" icon="delete" />
          </a-popconfirm>

        </template>

      </a-table>
    </a-card>
  </a-page-header>
</template>

<script>
import {addOrder, updateOrder, deleteOrderById, getOrderList} from "@/api/order";

const columns = [
  {
    title: '订单标识',
    dataIndex: 'orderId',
    key: 'orderId',
  },
  {
    title: '订单码',
    dataIndex: 'sn',
    key: 'sn',
  },
  {
    title: '订单金额(原价)',
    dataIndex: 'oldPrice',
    key: 'oldPrice',
  },
  {
    title: '订单金额(折后价)',
    dataIndex: 'newPrice',
    key: 'newPrice',
  },
  {
    title: '下单帐号',
    dataIndex: 'accountId',
    key: 'accountId',
  },
  {
    title: '排片标识',
    dataIndex: 'movieShowId',
    key: 'movieShowId',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];


const modalFormRules = {
  orderPid: [
    {required: true, message: '请选择上级订单',trigger:['blur','change']},
  ],
  orderName: [
    {required: true, message: '请输入订单名称', trigger: ['blur']},
  ],
  sort: [
    {required: true, message: '请输入当前订单在同级订单内的排序序号', trigger: 'blur'},
  ],
  status:[
    {required: true, message: '请选择是否启用', trigger: 'change'}
  ]
}
export default {
  name: "SystemOrder",
  data() {
    return {
      formInline: {
        orderNameLike: '',
        searchStatus: undefined,
      },
      modalForm:{
        title:'',
        visible:false,
        confirmLoading: false,
        modalFormRules,
        isDisabled:false
      },
      addForm:{
        orderId:undefined,
        newPrice:undefined,
        oldPrice:undefined,
        num:undefined,
        sn:'',
        accountId:undefined,
        status:undefined,
        movieShowId:undefined
      },
      data:[],
      loading:false,
      columns,
      isHandleSubmit:false,
    }
  },
  mounted() {
    this.getOrderList()
  },
  methods:{
    // 查询表单提交
    print(a,b){
      console.log(a,b)
    },
    handleSubmit() {
      console.log(this.formInline)
      this.isHandleSubmit = true;
      let submitParams = {
      }

      if (this.formInline.menuNameLike!==''){
        submitParams['orderNameLike'] = this.formInline.orderNameLike
      }
      if (typeof (this.formInline.searchStatus)!=='undefined'){
        submitParams['orderStatus']=this.formInline.searchStatus
      }
      console.log('SystemOrder handleSubmit',submitParams)
      this.getOrderList()
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      if (this.isHandleSubmit){
        this.getOrderList()
      }
    },
    // 获取数据
    getOrderList(param= {rootOrderId:1}){
      this.loading = true
      getOrderList(param).then(res=>{
        this.data = res.data
      }).catch(err=>{
        console.log("SystemOrder:getOrderTreeData:"+err.message);
      }).finally(()=>{
        this.loading = false
      })
    },
    // addForm start
    showAddModal(){
      this.modalForm.isDisabled = false;
      this.modalForm.visible =  true
      this.modalForm.title = '新增订单'
    },
    showEditModal(record){
      console.log(record)
      this.modalForm.isDisabled = true
      this.modalForm.visible =  true
      this.modalForm.title = '修改订单'
      let {orderId, newPrice, oldPrice, num,sn,accountId,status,movieShowId} = record
      this.addForm = {
        orderId, newPrice, oldPrice, num,sn,accountId,status,movieShowId
      }
    },
    // 处理modal里的表单提交
    handleModalOk(){
      this.handleModalFormSubmit()
    },
    handleModalCancel(){
      this.modalForm.visible = false
      this.resetForm('addForm')
    },
    handleModalFormSubmit(){
      this.$refs['addForm'].validate(valid=>{
        if (valid) {
          let submitData = this.addForm
          this.modalForm.confirmLoading = true
          if (this.modalForm.isDisabled){
            this.handleUpdateOrder(submitData)
          }else {
            this.handleAddOrder(submitData)
          }
        } else {
          this.handleFiled(new Error('表单校验不通过'))
          return false;
        }
      })
    },
    resetForm(formName) {
      this.addForm = {
        orderId:undefined,
        newPrice:undefined,
        oldPrice:undefined,
        num:undefined,
        sn:'',
        accountId:undefined,
        status:undefined,
        movieShowId:undefined
      }
      this.$refs[formName].resetFields();
    },
    // addForm end
    handleAddOrder(order){
      addOrder(order).then(res=>{
        this.handleSuccess(res)
        this.resetForm('addForm')
      }).catch(err=> this.handleFiled(err))
    },
    handleDeleteOrder(orderId){
      deleteOrderById(orderId).then(res=>{
        this.handleSuccess(res)
      }).catch(err=> this.handleFiled(err))
    },
    handleUpdateOrder(order){
      updateOrder(order).then(res=>{
        this.handleSuccess(res)
        this.resetForm('addForm')
      }).catch(err=> this.handleFiled(err))
    },
    handleSuccess(res){
      this.modalForm.confirmLoading = false
      this.$notification['success']({
        message: '成功',
        description: `${res.data}`,
        duration: 4
      })
      this.getOrderList()
    },
    handleFiled(err){
      this.modalForm.confirmLoading = false
      console.log(err.message)
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).message || {}).message||err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  },

  computed:{
    isDisable(){
      return this.formInline.orderNameLike===''&&!this.formInline.searchStatus;
    }
  }
}
</script>

<style scoped>

</style>
